<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>天天赢球+雷速</title>
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
        display: flex;
      }
      .view-container {
        position: relative;
        overflow: hidden;
      }
      .divider {
        width: 10px;
        background-color: #ccc;
        cursor: col-resize;
      }
    </style>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>

    <div class="view-container" id="view1"></div>
    <div class="divider" id="divider"></div>
    <div class="view-container" id="view2"></div>

    <script>
      const divider = document.getElementById('divider');
      let isDragging = false;
      let startX, startWidth;

      divider.addEventListener('mousedown', (e) => {
        isDragging = true;
        startX = e.clientX;
        startWidth = document.getElementById('view1').offsetWidth;
      });

      window.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        const newWidth = startWidth + (e.clientX - startX);
        const maxWidth = document.body.clientWidth;
        const newRatio = Math.max(0.1, Math.min(0.9, newWidth / maxWidth));
        document.getElementById('view1').style.width = `${newWidth}px`;
        document.getElementById('view2').style.width = `calc(100% - ${newWidth}px - 10px)`;
        document.getElementById('divider').style.left = `${newWidth}px`;

        // 发送新的分割线位置到主进程
        const newPosition = newRatio;
        require('electron').ipcRenderer.send('resize-divider', newRatio);
      });

      window.addEventListener('mouseup', () => {
        isDragging = false;
      });
    </script>

  </body>
</html>
